<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="风险评估结果" left-arrow @click-left="$router.go(-1)" />
    <!-- 背景盒子 -->
    <div class="bgbox">
      <!-- 身体活动评估标题 -->
      <div class="bodytitle">
        <!-- <div class="time">2021-12-17</div> -->
        <h3 class="bodyactivity">饮食习惯评估</h3>
      </div>
      <!-- 评估结果 -->
      <div class="resultbox">
        <div class="result">评估结果</div>
        <div class="resultword">
          您的<span>饮食不均衡</span>,请注意以下事项。
        </div>
      </div>
      <!-- 健康处方 -->
      <div class="prescription">
        <!-- 处方标题 -->
        <div class="pre_title">
          <img src="/images/圆五角星.png" alt="" />
          <div>健康处方</div>
        </div>
        <!-- 处方内容 -->
        <div class="pre_text">
          1.定期体检，关注血压、血脂、血糖等指标的变化。<br>
          2.积极控制体重，科学减重。<br>
          3.饮食结构以低盐、低脂肪、低胆固醇为宜，适当多食豆制品、蔬菜和水果，少吃脂肪高的食物如肥肉和动物内脏等。<br>
          4.三餐合理分配，零食要适当。 <br>
          5.减少在外就餐次数。<br>
          6.适量运动，使能量摄入和能量消耗处于一种动态平衡。<br>
        </div>
      </div>
      <button @click="change">返回首页</button>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    change() {
      this.$router.push("/home");
    },
  },
};
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #1074ff;

  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
}

.bgbox {
  width: 100vw;
  height: 100vw;
  background-color: #f8f8f8;

  .bodytitle {
    width: 95vw;
    margin: auto;
    background-color: #fff;
    .time {
      font-size: 200;
      color: #acacac;
      margin: 2vw 4vw;
    }
    .bodyactivity {
      font-size: 400;
      font-weight: 400;
      margin-left: 4vw;
      padding-bottom: 2vw;
    }
  }
  .resultbox {
    text-align: center;
    .result {
      font-size: 6vw;
      font-weight: 600;
      margin: 4vw;
    }
    .resultword {
      color: #676767;
      span {
        color: #f0928f;
      }
    }
  }
  .prescription {
    width: 95vw;
    margin: auto;
    margin-top: 10vw;
    background-color: #fff;
    .pre_title {
      display: flex;
      padding: 4vw;
      img {
        width: 5vw;
        margin-right: 1vw;
      }
    }
    .pre_text {
      color: #676767;
      margin: 0 5vw;
    }
  }
  button {
    display: block;
    margin: 10vw auto;
    color: #fff;
    border: none;
    width: 70vw;
    height: 12vw;
    border-radius: 15px;
    background-color: #1074ff;
  }
}
</style>